<!-- 数据持久化示例页面 -->
<!-- 必须全局拥有唯一的id -->
<div id="persistencedemo">
    <div style="color:red">
        <h2>{{ $t('persistence.dbzscgsl') }}</h2>
    </div>
    <!-- 搜索栏 -->
    <el-form-q form="query" :field-data="queryFields" search-table="demoTable" :buttons="queryButtons"></el-form-q>

    <!-- 工具栏 -->
    <div class="yu-toolBar">
        <el-button-group>
            <el-button icon="add" @click="openCreateFn">{{ $t('persistence.xz') }}</el-button>
            <el-button icon="edit" @click="openEditFn">{{ $t('persistence.xg') }}</el-button>
            <el-button icon="delete" @click="deleteFn">{{ $t('persistence.sc') }}</el-button>
            <el-button icon="edit" @click="openDetailFn">{{ $t('persistence.zk') }}</el-button>
        </el-button-group>
    </div>

    <!-- 表格 -->
    <el-table-x ref="demoTable" :max-height="height" :data-url="urls.dataUrl" :base-params="dataParams" :table-columns="tableColumns">
    </el-table-x>

    <!--{{ $t('persistence.xz') }}与编辑弹框 -->
    <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" height="370px" width="700px"
        @close="beforeClose">
        <el-form-x ref="WfTaskPoolForm" :group-fields="updateFields" :disabled="formDisabled" label-width="110px"></el-form-x>
        <div slot="footer" align="center">
            <el-button v-if="dialogStatus=='creat'" type="primary" @click="saveCreateFn()">{{ $t('persistence.qd') }}</el-button>
            <el-button v-if="dialogStatus=='update'" type="primary" @click="saveEditFn()">{{ $t('persistence.qd') }}</el-button>
            <el-button @click="dialogFormVisible = false">{{ $t('persistence.gb') }}</el-button>
        </div>
    </el-dialog-x>
    <br/>
    <br/>
    <div style="color:red">
        <h2> {{ $t('persistence.sjqxslglcyhmwdqdlyhdjl') }}</h2>
    </div>
    <br/>
    <!-- 表格 -->
    <el-table-x ref="authDemoTable" :max-height="height" :data-url="urls.authDemoUrl" :base-params="dataParams" :table-columns="tableColumns">
    </el-table-x>
</div>